<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>3D 盒子</title>
    <style>
        html,
        body {
            margin: 0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            background-color: #2f3542;
        }

        main {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .cube {
            width: 250px;
            height: 250px;
            transform-style: preserve-3d;
            transform-origin: 125px 125px 0;
            animation: rotate-cube 10s ease-in-out infinite;
        }

        .cube>div {
            width: 250px;
            height: 250px;
            background-size: cover;
            background-position: center center;
            opacity: 0.8;
            position: absolute;
            box-shadow: inset 0 0 4px 2px rgba(106, 106, 106, 0.4);
        }

        /* 前 */
        .cube .img1 {
            background-image: url("https://images.pexels.com/photos/274131/pexels-photo-274131.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            transform: rotateY(0deg) translateZ(125px);
        }

        /* 右 */
        .cube .img2 {
            background-image: url("https://images.pexels.com/photos/1480690/pexels-photo-1480690.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            transform: rotateY(90deg) translateZ(125px);
        }

        /* 左 */
        .cube .img3 {
            background-image: url("https://images.pexels.com/photos/36487/above-adventure-aerial-air.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            transform: rotateY(-90deg) translateZ(125px);
        }

        /* 下 */
        .cube .img4 {
            background-image: url("https://images.pexels.com/photos/338713/pexels-photo-338713.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            transform: rotateX(90deg) translateZ(125px);
        }

        /* 上 */
        .cube .img5 {
            background-image: url("https://images.pexels.com/photos/325044/pexels-photo-325044.jpeg?cs=srgb&dl=close-up-of-fish-over-black-background-325044.jpg&fm=jpg");
            transform: rotateX(-90deg) translateZ(125px);
        }

        /* 后 */
        .cube .img6 {
            background-image: url("https://images.pexels.com/photos/404280/pexels-photo-404280.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
            transform: rotateY(180deg) translateZ(125px);
        }

        @keyframes rotate-cube {
            0% {
                transform: rotateX(0deg) rotateY(0deg);
            }

            20% {
                /* 右边图片 */
                transform: rotateY(-90deg);
            }

            40% {
                /* 上 */
                transform: rotateX(-90deg);
            }

            60% {
                /* 左 */
                transform: rotateY(90deg);
            }

            80% {
                /* 下 */
                transform: rotateX(90deg);
            }

            100% {
                transform: rotateX(0deg) rotateY(0deg);
            }
        }
    </style>
</head>

<body>
    <main>
        <div class="cube">
            <div class="img1"></div>
            <div class="img2"></div>
            <div class="img3"></div>
            <div class="img4"></div>
            <div class="img5"></div>
            <div class="img6"></div>
        </div>
    </main>
</body>

</html>